<h2>{{defaultConfig.name}}</h2>
<ng-container [ngSwitch]="editmode">
  <ng-template ngSwitchCase="list">
    <test-modal #viewModal titleName='Measurements'></test-modal>
    <test-modal #viewModalDelete titleName='Deleting:' [customMessage]="['Deleting this Measurement will affect the following components','Deleting this Measurement will NOT affect any component. Safe delete']" [customMessageClass]="['alert alert-danger','alert alert-success']"
        [showValidation]="true" [textValidation]="'Delete'" [controlSize]="true" (validationClicked)="deleteMeasurement($event)">
    </test-modal>
    <export-file-modal #exportFileModal [showValidation]="true" [exportType]="defaultConfig['slug']" [textValidation]="'Export'" titleName='Exporting:'></export-file-modal>
    <table-list #listTableComponent [typeComponent]="defaultConfig['slug']" [data]="data" [columns]="defaultConfig['table-columns']" [counterItems]="counterItems" [counterErrors]="counterErrors" [selectedArray]="selectedArray" [isRequesting]="isRequesting" [tableRole]="tableRole"
    [sanitizeCell]="tableCellParser" [roleActions]="overrideRoleActions" (customClicked)="customActions($event)"></table-list>
  </ng-template>

  <ng-template ngSwitchDefault>
    <form [formGroup]="measurementForm" class="form-horizontal" (ngSubmit)="editmode === 'create' ? saveMeasurement() : updateMeasurement()">
    <ng-container>
      <div class="row well well-sm">
        <h4 style="display:inline">
        <i class="glyphicon glyphicon-cog text-info"></i> {{ editmode | uppercase}}
      </h4>
      <div class="pull-right" style="margin-right: 20px">
        <div style="display:inline" tooltip='Submit' container=body><button class="btn btn-success" type="submit" [disabled]="!measurementForm.valid"> <i class="glyphicon glyphicon-ok-circle"></i></button></div>
        <div style="display:inline" tooltip='Reset' container=body><button class="btn btn-warning" type="reset" [disabled]="!measurementForm.dirty"><i class="glyphicon glyphicon-ban-circle"></i> </button></div>
        <div style="display:inline" tooltip='Cancel' container=body><button class="btn btn-danger" type="button" (click)="cancelEdit()"><i class="glyphicon glyphicon-remove-circle"></i></button></div>
      </div>
    </div>
  </ng-container>
  <div class="form-fixed-height">
      <div class="well well-sm">
        <span class="editsection">
          Core Settings
        </span>
        <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="ID">ID</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique identifier of measurement"></i>
        <div class="col-sm-9">
          <input formControlName="ID" id="ID" [ngModel]="measurementForm.value.ID"/>
          <control-messages [control]="measurementForm.controls.ID"></control-messages>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-sm-2" for="Name">Name</label> <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Measurement name used on the output DB server"></i>
        <div class="col-sm-9">
          <input formControlName="Name" id="Name" [ngModel]="measurementForm.value.Name"/>
          <control-messages [control]="measurementForm.controls.Name"></control-messages>
        </div>
      </div>

    </div>

      <div class="well well-sm">
        <span class="editsection">
          Measurement Settings
        </span>
        <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="GetMode">GetMode</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Different mode to get the values. On 'value' the measurement collects many values as fields have. On 'indexed' the measurement collects many values as many fields finds on the indexOID request"></i>
        <div class="col-sm-9">
          <select formControlName="GetMode" id="GetMode" (click)="setDynamicFields(measurementForm.value.GetMode)" [ngModel]="measurementForm.value.GetMode">
            <option value="value">(snmp scalar) Direct Value</option>
            <option value="indexed">(snmp Table) Indexed with direct TAG</option>
            <option value="indexed_it">(snmp Table) Indexed with indirect TAG </option>
            <option value="indexed_mit">(snmp Table) Indexed with multiple indirect TAG </option>
            <option value="indexed_multiple">(snmp Table) Multiple indexes </option>
          </select>
          <control-messages [control]="measurementForm.controls.GetMode"></control-messages>
        </div>
      </div>
      
      <div class="form-group">
        <label class="control-label col-sm-2" for="Freq">Freq</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Preferred Frequency of snmp data polling (in seconds) [it will take the device config if not set]"></i>
        <div class="col-sm-9">
          <input formControlName="Freq" id="Freq" [ngModel]="measurementForm.value.Freq" />
          <control-messages [control]="measurementForm.controls.Freq"></control-messages>
        </div>
      </div>

      <div class="form-group" *ngIf="measurementForm.value.GetMode != 'value'">
        <label class="control-label col-sm-2" for="UpdateFltFreq">UpdateFltFreq</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Number of snmp data gather cycles the collector will take to update  indexes and filters if (indexed/snmptable) measurements of snmp data polling (time will be this number*freq seconds) <br> Set this value to -1 to disable indexes and filters updates only for this measurement  [if set to 0 it will take the device Filter frequency config instead]"></i>
        <div class="col-sm-9">
          <input formControlName="UpdateFltFreq" id="UpdateFltFreq" [ngModel]="measurementForm.value.UpdateFltFreq" />
          <control-messages [control]="measurementForm.controls.UpdateFltFreq"></control-messages>
        </div>
      </div>

        <div class="form-group" *ngIf="measurementForm.controls.IndexOID">
          <label class="control-label col-sm-2" for="IndexOID">IndexOID</label>
          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The index OID to get the all real OID's to query data"></i>
          <div class="col-sm-9">
            <input formControlName="IndexOID" id="IndexOID" [ngModel]="measurementForm.value.IndexOID"/>
            <control-messages [control]="measurementForm.controls.IndexOID"></control-messages>
          </div>
        </div>

        <ng-container *ngIf="measurementForm.controls.MultiTagOID">
          <label class="control-label col-sm-2">Multi Tag OID</label>
          <div class="col-sm-10">
          </div>
          <div class="col-sm-2"></div>
          <div class="col-sm-10" style="margin-bottom: 20px">
            <p style="display: inline-block;">
              <button type="button" class="btn btn-primary"  (click)="addMultiTagOID()">
                <i class="glyphicon glyphicon-plus">
                </i>
              </button>
            </p>   

        <div formArrayName="MultiTagOID" class="not-invalid" >
          <control-messages [control]="measurementForm.controls.MultiTagOID"></control-messages>

          <accordion>
            <div *ngFor="let mult_index of MultiTagOID.controls; let i=index;  let fi = first;  let li = last;">
              <div class="anim">
                <accordion-group class="col-sm-10" style="padding: 0px;" [formGroupName]="i">
                  <button class="btn btn-link btn-block clearfix" accordion-heading type="button">
                    <div class="pull-left float-left">
                      <p class="text-left text-dark">TagOID {{i}} | {{measurementForm.value.MultiTagOID[i].TagOID}}
                    </div>
                    <span class="badge badge-secondary float-right pull-right"></span>
                  </button>
                  <div class="form-group" *ngIf="mult_index.controls.TagOID">
                    <label class="control-label col-sm-2" for="Label">Index TagOID</label>
                    <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The Tag OID will allow us to get real Tag Name not provided in the IndexOID"></i>
                    <div class="col-sm-9">
                      <input formControlName="TagOID" id="TagOID" [ngModel]="measurementForm.value.MultiTagOID[i].TagOID"/>
                      <control-messages [control]="mult_index.controls.TagOID"></control-messages>
                    </div>
                  </div>
                  <div class="form-group" *ngIf="mult_index.controls.IndexFormat">
                    <label class="control-label col-sm-2" for="IndexFormat">IndexFormat</label>
                    <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Format index to change the check condition with $IDX1, $VAL1 (default $VAL1"></i>
                    <div class="col-sm-9">
                      <input formControlName="IndexFormat" id="IndexFormat" [ngModel]="measurementForm.value.MultiTagOID[i].IndexFormat"/>
                      <control-messages [control]="mult_index.controls.IndexFormat"></control-messages>
                    </div>
                  </div>
              </accordion-group>
              <div class="col-sm-2">
                <button type="button" class="btn btn-primary btn-xs">
                  <i class="glyphicon glyphicon-remove" (click)="removeTagOID(i)" ></i>
                </button>
                <button type="button" class="btn btn-primary btn-xs" [disabled] = "fi">
                <i class="glyphicon glyphicon-arrow-up" (click)="promoteTagOID(i)"></i>
              </button>
              <button type="button" class="btn btn-primary btn-xs" [disabled] = "li">
                <i class="glyphicon glyphicon-arrow-down"  (click)="demoteTagOID(i)"></i>
              </button>
              </div>
              </div>
              </div>
            </accordion>
        </div>
      </div>
        <br>
        </ng-container>
          <div class="form-group" *ngIf="measurementForm.controls.TagOID">
            <label class="control-label col-sm-2" for="TagOID">TagOID</label>
            <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The Tag OID will allow us to get real Tag Name not provided in the IndexOID"></i>
            <div class="col-sm-9">
              <input formControlName="TagOID" id="TagOID" [ngModel]="measurementForm.value.TagOID"/>
              <control-messages [control]="measurementForm.controls.TagOID"></control-messages>
            </div>
          </div>

        <div class="form-group" *ngIf="measurementForm.controls.IndexTag">
          <label class="control-label col-sm-2" for="IndexTag">IndexTag</label>
          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Tag name that will be sent after data gathered"></i>
          <div class="col-sm-9">
            <input formControlName="IndexTag" id="IndexTag" [ngModel]="measurementForm.value.IndexTag"/>
            <control-messages [control]="measurementForm.controls.IndexTag"></control-messages>
          </div>
        </div>

        <div class="form-group" *ngIf="measurementForm.controls.IndexTagFormat">
          <label class="control-label col-sm-2" for="IndexTag">IndexTagFormat</label>
          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Tag value will be sent parametrized with $IDX1 , $VAL1 (default $VAL1 on direct indexed) and $IDX2, $VAL2 (default $VAL2 on indirect indexed) "></i>
          <div class="col-sm-9">
            <input formControlName="IndexTagFormat" id="IndexTagFormat" [ngModel]="measurementForm.value.IndexTagFormat"/>
            <control-messages [control]="measurementForm.controls.IndexTagFormat"></control-messages>
          </div>
        </div>

        <div class="form-group" *ngIf="measurementForm.controls.IndexAsValue">
          <label class="control-label col-sm-2" for="IndexAsValue">IndexAsValue</label>
          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="If set to true the value for the TAG will be the indexnum , else will be the value , remember in SNMP Indexed Tables we will get data on this form snmpget(IndexOID.Indexnum) = value "></i>
          <div class="col-sm-9">
            <select formControlName="IndexAsValue" id="IndexAsValue" [ngModel]="measurementForm.value.IndexAsValue">
              <option value="false">false</option>
              <option value="true">true</option>
            </select>
            <control-messages [control]="measurementForm.controls.IndexAsValue"></control-messages><b>(Deprecated)</b>
          </div>
        </div>

       <ng-container *ngIf="measurementForm.controls.MultiIndexCfg">
        <label class="control-label col-sm-2">Multi Index Measurements</label>
        <div class="col-sm-10">
         
        </div>
        <div class="col-sm-2"></div>
        <div class="col-sm-10" style="margin-bottom: 20px">
          <p style="display: inline-block;">
            <button type="button" class="btn btn-primary"  (click)="addMultiIndex(sel.value)">
              <i class="glyphicon glyphicon-plus">
              </i>
            </button>
          </p>   

          <select #sel style="display: inline;">
            <option value="indexed">(snmp Table) Indexed with direct TAG</option>
            <option value="indexed_it">(snmp Table) Indexed with indirect TAG </option>
            <option value="indexed_mit">(snmp Table) Indexed with multiple indirect TAG </option>
          </select>

        <div formArrayName="MultiIndexCfg" class="not-invalid" >
          <accordion>

          <div *ngFor="let mult_index of MultiIndexCfg.controls; let i=index;  let fi = first;  let li = last;">
          <div class="anim">
            <accordion-group class="col-sm-10" style="padding: 0px;" [formGroupName]="i">
              <button class="btn btn-link btn-block clearfix" accordion-heading type="button">
                <div class="pull-left float-left">
                  <p class="text-left text-dark">Index {{i}} | {{measurementForm.value.MultiIndexCfg[i].Label}}<span *ngIf="measurementForm.value.MultiIndexCfg[i].Dependency !== ''"> | {{measurementForm.value.MultiIndexCfg[i].Dependency}} </span></p>
                  <p class="text-left text-muted">{{measurementForm.value.MultiIndexCfg[i].Description}}</p>
                </div>
                <span class="badge badge-secondary float-right pull-right">
                  <span *ngIf="measurementForm.value.MultiIndexCfg[i].GetMode == 'indexed'">indexed - (snmp Table) Indexed with direct TAG</span>
                  <span *ngIf="measurementForm.value.MultiIndexCfg[i].GetMode == 'indexed_it'">indexed_it - (snmp Table) Indexed with indirect TAG</span>
                  <span *ngIf="measurementForm.value.MultiIndexCfg[i].GetMode == 'indexed_mit'">indexed_mit - (snmp Table) Indexed with multiple indirect TAG</span>
                  </span>

              </button>

            <!--div-->
              <div class="form-group" *ngIf="mult_index.controls.Label">
                <label class="control-label col-sm-2" for="Label">Index Label</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique identifier of the index"></i>
                <div class="col-sm-9">
                  <input formControlName="Label" id="Label" [ngModel]="measurementForm.value.MultiIndexCfg[i].Label"/>
                  <control-messages [control]="mult_index.controls.Label"></control-messages>
                </div>
              </div>
              <div class="form-group" *ngIf="mult_index.controls.Description">
                <label class="control-label col-sm-2" for="Description">Index Description</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Description of the index"></i>
                <div class="col-sm-9">
                  <input formControlName="Description" id="Label" [ngModel]="measurementForm.value.MultiIndexCfg[i].Description"/>
                  <control-messages [control]="mult_index.controls.Description"></control-messages>
                </div>
              </div>
              <hr>
              <div class="form-group" *ngIf="mult_index.controls.IndexOID">
                <label class="control-label col-sm-2" for="IndexOID">Index Base OID</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The index OID to get the all real OID's to query data"></i>
                <div class="col-sm-9">
                  <input formControlName="IndexOID" id="IndexOID" [ngModel]="measurementForm.value.MultiIndexCfg[i].IndexOID"/>
                  <control-messages [control]="mult_index.controls.IndexOID"></control-messages>
                </div>
              </div>
      
                <div class="form-group" *ngIf="mult_index.controls.TagOID">
                  <label class="control-label col-sm-2" for="TagOID">Index TagOID</label>
                  <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The Tag OID will allow us to get real Tag Name not provided in the IndexOID"></i>
                  <div class="col-sm-9">
                    <input formControlName="TagOID" id="TagOID" [ngModel]="measurementForm.value.MultiIndexCfg[i].TagOID"/>
                    <control-messages [control]="mult_index.controls.TagOID"></control-messages>
                  </div>
                </div>
      
              <div class="form-group" *ngIf="mult_index.controls.IndexTag">
                <label class="control-label col-sm-2" for="IndexTag">Index Tag</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Tag name that will be sent after data gathered"></i>
                <div class="col-sm-9">
                  <input formControlName="IndexTag" id="IndexTag" [ngModel]="measurementForm.value.MultiIndexCfg[i].IndexTag"/>
                  <control-messages [control]="mult_index.controls.IndexTag"></control-messages>
                </div>
              </div>
      
              <div class="form-group" *ngIf="mult_index.controls.IndexTagFormat">
                <label class="control-label col-sm-2" for="IndexTag">Index Tag Format</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Tag value will be sent parametrized with $IDX1 , $VAL1 (default $VAL1 on direct indexed) and $IDX2, $VAL2 (default $VAL2 on indirect indexed) "></i>
                <div class="col-sm-9">
                  <input formControlName="IndexTagFormat" id="IndexTagFormat" [ngModel]="measurementForm.value.MultiIndexCfg[i].IndexTagFormat"/>
                  <control-messages [control]="mult_index.controls.IndexTagFormat"></control-messages>
                </div>
              </div>

              <ng-container *ngIf="mult_index.controls.MultiTagOID">
                <label class="control-label col-sm-2">Multi Tag OID</label>
                <div class="col-sm-10">
                </div>
                <div class="col-sm-2"></div>
                <div class="col-sm-10" style="margin-bottom: 20px">
                  <p style="display: inline-block;">
                    <button type="button" class="btn btn-primary"  (click)="addMIMultiTagOID(i)">
                      <i class="glyphicon glyphicon-plus">
                      </i>
                    </button>
                  </p>   
      
                  <!--- MULTITAGOID -->
              <div formArrayName="MultiTagOID" class="not-invalid" >     
                <accordion>
                  <div *ngFor="let mult_tag of mult_index.controls.MultiTagOID.controls; let j=index;  let jfi = first;  let jli = last;">
                    <div class="anim">
                      <accordion-group class="col-sm-10" style="padding: 0px;" [formGroupName]="j">
                        <button class="btn btn-link btn-block clearfix" accordion-heading type="button">
                          <div class="pull-left float-left">
                            <p class="text-left text-dark">TagOID {{j}} | {{measurementForm.value.MultiIndexCfg[i].MultiTagOID[j].TagOID}}
                          </div>
                          <span class="badge badge-secondary float-right pull-right"></span>
                        </button>
                        <div class="form-group" *ngIf="mult_tag.controls.TagOID">
                          <label class="control-label col-sm-2" for="Label">Index TagOID</label>
                          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The Tag OID will allow us to get real Tag Name not provided in the IndexOID"></i>
                          <div class="col-sm-9">
                            <input formControlName="TagOID" id="TagOID" [ngModel]="measurementForm.value.MultiIndexCfg[i].MultiTagOID[j].TagOID"/>
                            <control-messages [control]="mult_tag.controls.TagOID"></control-messages>
                          </div>
                        </div>
                        <div class="form-group" *ngIf="mult_tag.controls.IndexFormat">
                          <label class="control-label col-sm-2" for="IndexFormat">IndexFormat</label>
                          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Format index to change the check condition with $IDX1, $VAL1 (default $VAL1"></i>
                          <div class="col-sm-9">
                            <input formControlName="IndexFormat" id="IndexFormat" [ngModel]="measurementForm.value.MultiIndexCfg[i].MultiTagOID[j].IndexFormat"/>
                            <control-messages [control]="mult_tag.controls.IndexFormat"></control-messages>
                          </div>
                        </div>
                    </accordion-group>
                    <div class="col-sm-2">
                      <button type="button" class="btn btn-primary btn-xs">
                        <i class="glyphicon glyphicon-remove" (click)="removeMITagOID(i,j)"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-xs" [disabled] = "jfi">
                      <i class="glyphicon glyphicon-arrow-up" (click)="promoteMITagOID(i,j)"></i>
                    </button>
                    <button type="button" class="btn btn-primary btn-xs" [disabled] = "jli">
                      <i class="glyphicon glyphicon-arrow-down"  (click)="demoteMITagOID(i,j)"></i>
                    </button>
                    </div>
                    </div>
                    </div>
                  </accordion>
              </div>
            </div>
              <br>
              </ng-container>
              <hr>
              <div class="form-group" *ngIf="mult_index.controls.Dependency">
                <label class="control-label col-sm-2" for="Dependency">Index Dependency</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The dependency syntax to heridate tags from other indexes. The syntax follows: IM{N};DOT[XXX-YYY];SKIP|FILL(XXX)
                IM{N} references the index N. The DOT[XXX-YYY] references the OID range to check its dependency. The SKIP|FILL(XXX) references the fill strategy in case that heridate doesn't match the current index. SKIP will remove indexes, FILL(XXX) will fill the 
                value with desired one"></i>
                <div class="col-sm-9">
                  <input formControlName="Dependency" id="Dependency" [ngModel]="measurementForm.value.MultiIndexCfg[i].Dependency"/>
                  <control-messages [control]="mult_index.controls.Dependency"></control-messages>
                </div>
              </div>   

            <!--/div-->
          </accordion-group>
          <div class="col-sm-2">
            <button type="button" class="btn btn-primary btn-xs">
              <i class="glyphicon glyphicon-remove" (click)="removeMeas(i)" ></i>
            </button>
            <button type="button" class="btn btn-primary btn-xs" [disabled] = "fi">
            <i class="glyphicon glyphicon-arrow-up" (click)="promoteMeas(i)"></i>
          </button>
          <button type="button" class="btn btn-primary btn-xs" [disabled] = "li">
            <i class="glyphicon glyphicon-arrow-down"  (click)="demoteMeas(i)"></i>
          </button>
          </div>
          </div>
          </div>
        </accordion>

          </div>

     </div>
     <div class="form-group" *ngIf="measurementForm.controls.MultiIndexResult">
      <label class="control-label col-sm-2" for="MultiIndexResult">Multi Index Result</label>
      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Build the new index from indexes. The syntax follows as: .1.IDX{M}, on IDX{M} is an index. If multiple indexes are used, the result will be the scalar product between all pairs of [index:value]"></i>
      <div class="col-sm-9">
        <input formControlName="MultiIndexResult" id="MultiIndexResult" [ngModel]="measurementForm.value.MultiIndexResult"/>
        <control-messages [control]="measurementForm.controls.MultiIndexResult"></control-messages>
      </div>
    </div>
     <br>

      </ng-container>

      <div class="form-group" >
        <label class="control-label col-sm-2" for="Fields">Fields</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="List of metrics to associate with the measurement {{measurementForm.value.ID}}"></i>
        <div class="col-sm-9">
          <div>
            <ss-multiselect-dropdown [options]="selectmetrics" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="selectedMetrics" [ngModelOptions]="{standalone: true}" (ngModelChange)="onChangeMetricArray($event)"></ss-multiselect-dropdown>
            <control-messages [control]="measurementForm.controls.Fields"></control-messages>
          </div>
        </div>
      </div>

      <div class="form-group" *ngIf="metricArray.length > 0">
        <label class="control-label col-sm-2" for="Report">Report Fields</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="List of metrics to associate with the measurement {{measurementForm.value.ID}}"></i>
        <div class="col-sm-9">
          <div class="input-group list-group">
            <div *ngFor="let metric of metricArray; let i = index">
              <div class="input-group" style="background: none">
                <div dropdown class="input-group-addon">
                  <h5 role="button" [ngClass]="[reportMetricStatus[metric.Report].icon, reportMetricStatus[metric.Report].class]" tooltip="{{reportMetricStatus[metric.Report].name}}" class="dropdown-toggle-split" type="button" dropdownToggle></h5>
                  <ul class="dropdown-menu" *dropdownMenu role="menu" aria-labelledby="split-button">
                    <li role="menuitem" *ngFor="let reportArray of reportMetricStatus; let reportIndex = index" [ngClass]="">
                      <span role="button" (click)="onCheckMetric(i,reportIndex)" class="dropdown-item" [ngClass]="reportArray.class"><i style="padding-left: 5px; margin-right: 5px" [ngClass]="reportArray.icon"></i>{{reportArray.name}}</span>
                    </li>
                  </ul>
                </div>
                <div class="input-group-addon" style="background: white">
                  <span [ngClass]="[reportMetricStatus[metric.Report].class]">{{metric.ID}}</span>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>


      <div class="well well-sm">
        <span class="editsection">
          Extra Settings
        </span>
        <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="Description">Description</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Description of the Measurement"></i>
        <div class="col-sm-9">
          <textarea class="form-control" style="width: 50%" rows="2" formControlName="Description" id="Description" [ngModel]="measurementForm.value.Description"> </textarea>
          <control-messages [control]="measurementForm.controls.Description"></control-messages>
        </div>
      </div>
      </div>
  </div>
</form>
  </ng-template>
</ng-container>
